import React, { useEffect, useReducer } from 'react'



// 1. 定义初始状态
const initState = {
    banner: [],
    pro: [],
    name: '张三',
    age: 18
    // ......
}

// 2. 定义修改 state 的事件
const reducer = (state, action) => {
    switch (action.type) {
        case 'change-banner':

            return { ...state, banner: action.payload }
        case 'change-pro':

            return { ...state, pro: action.payload }

        case 'change-name':

            return { ...state, name: action.payload }
        case 'change-age':

            return { ...state, age: action.payload }
        default:
            return state
    }
}



export default function App() {

    /*
    reducer：用于更新 state 的纯函数。参数为 state 和 action，返回值是更新后的 state。state 与 action 可以是任意合法值。
    initialArg：用于初始化 state 的任意值。初始值的计算逻辑取决于接下来的 init 参数。
    可选参数 init：用于计算初始值的函数。如果存在，使用 init(initialArg) 的执行结果作为初始值，否则使用 initialArg。
    */

    // useReducer 和 useState 都是给组件添加响应式数据的方法
    // 如果数据量比较庞大的时候可以使用 useReducer，简单的数据直接用 useState
    const [state, dispatch] = useReducer(reducer, initState)

    useEffect(() => {
        fetch('http://121.89.205.189:3000/api/banner/list').then(res => res.json()).then(res => {
            console.log(res.data);
            dispatch({
                type: 'change-banner',
                payload: res.data
            })
        })
    }, [])


    function getPro() {
        fetch('http://121.89.205.189:3000/api/pro/list').then(res => res.json()).then(res => {
            dispatch({
                type: 'change-pro',
                payload: res.data
            })
        })
    }

    return (
        <div>
            <h1> {state.name} - {state.age} </h1>

            {state.banner.map(item => {
                return <img style={{ width: 150 }} key={item.bannerid} src={item.img} alt="" />
            })}

            <button onClick={getPro}>点击获取商品列表</button>
            {state.pro.map(item => {
                return <p key={item.proid}> {item.proname} </p>
            })}
        </div>
    )
}
